<template>
  <t-head-menu expandType="popup">
    <template #logo>
      <img height="28" src="https://tdesign.gtimg.com/site/baseLogo-light.png" alt="logo"/>
    </template>
    <t-submenu value="1">
      <template #title>
        <span>产品</span>
      </template>
      <t-menu-item value="1-2">云服务器</t-menu-item>
      <t-menu-item value="1-3">IP</t-menu-item>
    </t-submenu>
    <t-menu-item value="2">咨询</t-menu-item>
    <t-menu-item value="3">服务须知</t-menu-item>
    <t-menu-item value="4">联系我们</t-menu-item>
    <template #operations>
      <div class="flex-between">
        <div>
          <label class="switch">
            <input
                type="checkbox"
                :checked="userStore.isDark === 'dark'"
                @change="changeTheme($event)"
            >
            <span class="slider"></span>
          </label>
        </div>
      </div>
    </template>
  </t-head-menu>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {useUserStore} from "@/stores/user";

const userStore = useUserStore()

const changeTheme = () => {
  userStore.isDark = userStore.isDark === 'light' ? 'dark' : 'light'
  themeChange()
}

const themeChange = () => {
  const transition = document.startViewTransition(() => {
    document.documentElement.setAttribute('theme-mode', userStore.isDark)
  })

  transition.ready.then(() => {
    // 1. 圆心：右上角
    const x = window.innerWidth
    const y = 0

    // 2. 半径：右上角 -> 左下角距离
    const radius = Math.hypot(x, window.innerHeight)

    // 3. 扩散动画
    document.documentElement.animate(
        {
          clipPath: [
            `circle(0% at ${x}px ${y}px)`,
            `circle(${radius}px at ${x}px ${y}px)`
          ]
        },
        {
          duration: 400,
          easing: 'ease-out',
          pseudoElement: '::view-transition-new(root)'
        }
    )
  })
}

onMounted(() => {
  themeChange()
})
</script>

<style lang="scss" scoped>
.switch {
  display: block;
  --width-of-switch: 3.5em;
  --height-of-switch: 2em;
  --size-of-icon: 1.4em;
  --slider-offset: 0.3em;
  position: relative;
  width: var(--width-of-switch);
  height: var(--height-of-switch);
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f4f4f5;
  transition: .4s;
  border-radius: 30px;
}

.slider:before {
  position: absolute;
  content: "";
  height: var(--size-of-icon, 1.4em);
  width: var(--size-of-icon, 1.4em);
  border-radius: 20px;
  left: var(--slider-offset, 0.3em);
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(40deg, #ff0080, #ff8c00 70%);;
  transition: .4s;
}

input:checked + .slider {
  background-color: #303136;
}

input:checked + .slider:before {
  left: calc(100% - (var(--size-of-icon, 1.4em) + var(--slider-offset, 0.3em)));
  background: #303136;
  box-shadow: inset -3px -2px 5px -2px #8983f7, inset -10px -4px 0 0 #a3dafb;
}
</style>